<template>
	<div class="newActivitiesProduct">
		<!--拱桥图片-->
		<div class="activitiespic">
			<img :src="bigimg" />
		</div>
		<!--商品列表-->
		<ul>
			<li v-for="(val,index) in productdata">
				<span class="iconspan">{{saleType}}</span>
				<img class="propic" :src="val.urllist[0].imgurl || 'static/image/demo1.png' " />
				<p>{{val.goodsname}}</p>
				<div class="buycar">
					<div class="money">
						<span>￥{{pricefn(val.wsprice,index)}}</span><!--bargainPriced?saleprice[index]:val.wsprice-->
						<span>/{{val.goodsunit}}</span>
					</div>
					<span class="carpic"><i class="icon njfont nj-jiagouwuche" style="font-size: 1.5rem;"></i></span>
				</div>
			</li>
		</ul>
	</div>

</template>

<script>
	import { queryGoodsList } from '@/utils/ReturnAxios'
	export default {
		props: {
			saleType: {
				type: String,
				default: ""
			},
			bargainPriced: {
				type: Number,
				default: null
			},
			bigimg: {
				type: String,
				default: ""
			},
			goodsInfo: {
				type: Array,
				default: ()=> []
			}
		},
		data() {
			return {
				saleprice:[],
				codeList: [],
				productdata: []
			}
		},
		components: {

		},
		methods: {
			//价格显示
			pricefn(price,index){
				if(this.bargainPriced==1){
					return this.saleprice[`${index}`]
				}else if(this.bargainPriced==2){
					return price - this.saleprice[`${index}`]
				}else{
					return price
				}
			},
			goodsCodearrey() {
				this.codeList = []
				if (this.goodsInfo.length == 0) {return}
				if(this.goodsInfo && this.goodsInfo.length > 0) {
					for(var i = 0; i < this.goodsInfo.length; i++) {
						this.codeList.push(this.goodsInfo[i].goodsCode)
						if(this.bargainPriced==1){
							this.saleprice.push(this.goodsInfo[i].goodsPromPrice)
						}else if(this.bargainPriced==2){
							this.saleprice.push(this.goodsInfo[i].goodsPromPrice)
						}
					}
					
					this.queryDetail()
				}
			},
			async queryDetail() {
				var goodscodeList = this.codeList
				if(goodscodeList.length == 0) {
					return
				}
				var config = {
					goodscodeList: goodscodeList
				}
				var res = await queryGoodsList(config)
				res = res.data
				this.productdata = res.data[0]
				if(!res.returnCode) {
					return
				}
			},
		},
		computed: {

		},

		watch: {
			goodsInfo() {
				this.goodsCodearrey()
				
			},
		},
		mounted() {
			this.goodsCodearrey()
		},
	}
</script>

<style>
	.newActivitiesProduct ul {
		padding: 0.75rem;
		position: relative;
	}
	
	.newActivitiesProduct ul li {
		position: relative;
		display: inline-block;
		background-color: #fff;
		width: 46%;
		margin: 0.5rem 1%;
		height: 11rem;
	}
	
	.newActivitiesProduct ul li .iconspan {
		background-color: #FF3636;
		color: #fff;
		border-radius: 0.1rem;
		padding: 0.1rem;
		position: absolute;
		left: 1rem;
		top: 0.7rem;
	}
	
	.newActivitiesProduct ul li .propic {
		height: 7rem;
		margin: 0 auto;
	}
	
	.newActivitiesProduct ul li p {
		color: #69A668;
		display: inline-block;
		text-align: left;
		padding: 0rem 0.5rem;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 0.5rem;
	}
	
	.newActivitiesProduct ul li .buycar {
		position: relative;
		margin-top: 0.3rem;
		text-align: left;
	}
	
	.newActivitiesProduct ul li .money {
		display: inline-block;
		margin-left: 0.5rem;
	}
	
	.newActivitiesProduct ul li .money span:first-child {
		color: #FF6000;
		font-size: 1rem;
	}
	
	.newActivitiesProduct ul li .money span:last-child {
		color: #BDBDBD;
	}
	
	.newActivitiesProduct ul li .carpic {
		position: absolute;
		right: 0.5rem;
		color: #FF6000;
	}
</style>